<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    span {
      border-bottom: 1px solid black;
      width: 100px;
      display: inline-block;
      text-align: center;
      font-size: 16px;
      margin: 15px;
    }
    input {
      outline: 0;
      border: 0;
      border-bottom: 1px solid black;
      width: 100px;
      font-size: 16px;
      text-align: center;
      margin: 15px;
    }
  </style>
  <body>
    <div id="root">
      <fieldset>
        <legend>究极无敌真假input</legend>
        <template v-for="(v,k,i) in userInfo">
          <label for="k">{{k}}:</label>
          <input
            type="text"
            name="k"
            v-model="val"
            ref="ipt"
            @blur="esc(k)"
            v-if="isedit&&selectIndex===i"
          />
          <span @dblclick="dblFn(v,i)" v-else>{{v}}</span>
          <br />
        </template>
      </fieldset>
    </div>
  </body>
</html>
<script src="http://unpkg.zhimg.com/vue@2"></script>
<script>
  const vm = new Vue({
    el: "#root",
    data: {
      userInfo: {
        姓名: "韩孝周",
        年龄: 18,
        爱好: "拍戏",
        身高: "168cm"
      },
      //input框v-model绑定的值
      val: "",
      //isedit是用于失焦得时候判断
      isedit: false,
      //selectIndex是用于双击得时候判断点的是哪个
      selectIndex: ""
      // dd: [true, true, true, true]
    },
    methods: {
      dblFn(v, i) {
        this.selectIndex = i
        this.isedit = true
        //让input上一开始能显示对应的内容
        this.val = v
        //双击立马获焦
        this.$nextTick(() => {
          console.log(this.$refs.ipt[0].focus())
        })
        // console.log(i)
        // this.$nextTick(() => {
        //   this.dd[i] = false
        // }) 这个办法不行，打印出来dd数组已经改了，但是vue中数据没改
        // this.val = v

        // this.dd[i] = false
        // console.log(this.dd[i], !this.dd[i])
      },
      esc(k) {
        this.isedit = false
        this.userInfo[k] = this.val
        console.log(this.val)
      }
    }
  })
</script>
